<template>
  <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- 背景渐变 -->
    <defs>
      <linearGradient id="calcGradient" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#FF9F0A;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#FF6B00;stop-opacity:1" />
      </linearGradient>
      <linearGradient id="displayGradient" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#2C2C2E;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#1C1C1E;stop-opacity:1" />
      </linearGradient>
    </defs>
    
    <!-- 计算器外框 -->
    <rect x="8" y="8" width="48" height="48" rx="10" fill="url(#calcGradient)"/>
    
    <!-- 显示屏 -->
    <rect x="12" y="12" width="40" height="12" rx="2" fill="url(#displayGradient)"/>
    
    <!-- 数字显示 -->
    <text x="48" y="21" font-family="Arial, sans-serif" font-size="6" fill="#4AE54A" text-anchor="end" font-weight="bold">123</text>
    
    <!-- 按钮网格 -->
    <g opacity="0.9">
      <!-- 第一行 -->
      <circle cx="17" cy="31" r="3" fill="#5C5C5E"/>
      <circle cx="25" cy="31" r="3" fill="#5C5C5E"/>
      <circle cx="33" cy="31" r="3" fill="#5C5C5E"/>
      <circle cx="41" cy="31" r="3" fill="#FFA500"/>
      
      <!-- 第二行 -->
      <circle cx="17" cy="39" r="3" fill="#3C3C3E"/>
      <circle cx="25" cy="39" r="3" fill="#3C3C3E"/>
      <circle cx="33" cy="39" r="3" fill="#3C3C3E"/>
      <circle cx="41" cy="39" r="3" fill="#FFA500"/>
      
      <!-- 第三行 -->
      <circle cx="17" cy="47" r="3" fill="#3C3C3E"/>
      <circle cx="25" cy="47" r="3" fill="#3C3C3E"/>
      <circle cx="33" cy="47" r="3" fill="#3C3C3E"/>
      <circle cx="41" cy="47" r="3" fill="#FFA500"/>
    </g>
    
    <!-- 加号符号 -->
    <g opacity="0.8">
      <line x1="41" y1="37" x2="41" y2="41" stroke="white" stroke-width="1" stroke-linecap="round"/>
      <line x1="39" y1="39" x2="43" y2="39" stroke="white" stroke-width="1" stroke-linecap="round"/>
    </g>
  </svg>
</template>

<script setup lang="ts">
</script>

<style scoped>
svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
</style>

